<!-- 主体右侧内容 -->
<template>
  <div id="SiderRight"
    :class="[{'active':isShow},'zIndex900',{'SiderRight1':!$store.state.isMapShow},{'mapshow':$store.state.isMapShow}]">
    <Tabs></Tabs>
      <slot></slot>
  </div>
</template>
<script setup>
import { ref, toRefs, reactive, computed, onMounted, watch } from 'vue'
import $store from "@/store/index.js"
import Tabs from '@/components/modules/Tabs.vue'
//设置面板的显示隐藏
const isShow = computed(() => {
  return $store.state.statusSiderRight;
});
const toggleShow = () => {
  $store.commit('StatusSiderRight', !isShow.value)
}

</script>
<style scoped>
#SiderRight {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* width: 550px; */
  background: #edeff3;
  transition: right 0.3s;
  width: 88vw;
}

.SiderRight1 {
  transition: right 0s !important;
  display:flex;
  flex-direction:column;
}

/* #SiderRight.maxwidth {
  width: calc(100vw - 265px);
} */

#SiderRight.active {
  right: 0;
}
.mapshow {
  width: 550px !important;
  right: -541px !important;
}
.mapshow.active{
  width: 550px !important;
  right: 0px !important;
}

.toggle {
  width: 26px;
  height: 48px;
  position: absolute;
  left: -26px;
  top: 20px;
  cursor: default;
}
.zIndex900{
  z-index: 99;
}

:deep(.el-tabs) + div {
  height: calc(100% - 50px);
}
</style>